<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的增减改查</title>

    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            text-align: center;
            padding: 8px;
        }

        th {
            background-color: #ddd;
        }

        button {
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">表格的增减改查</h1>
    <button onclick="addRow()">新增数据</button>

    <table id="table">
        <tr>
            <th>姓名</th>
            <th>手机号</th>
            <th>操作方式</th>
        </tr>
        <tr>
            <td>桃子</td>
            <td>1234567890</td>
            <td>
                <button onclick="editRow(this)">编辑</button> <button onclick="deleteRow(this)">删除</button>
            </td>
        </tr>
    </table>

    <script>
        // 新增数据函数
            function addRow() {
                var table = document.getElementById('table');
                // console.log(table);
                // 获取插入位置
                var length = table.rows.length;
                // console.log(length);
                // 插入行节点
                var newRow = table.insertRow(length);
                // console.log(newRow);

                // 插入列节点对象
                var nameCol = newRow.insertCell(0);
                var phoneCol = newRow.insertCell(1);
                var actionCol = newRow.insertCell(2);

                // 修改节点文本内容
                nameCol.innerHTML = '名字目前是空白哟~';
                phoneCol.innerHTML = '电话目前是空白哟~';
                actionCol.innerHTML = '<button onclick="editRow(this)">编辑</button> <button onclick="deleteRow(this)">删除</button>';
            }

            // 删除数据函数
            function deleteRow(button) {
                var row = button.parentNode.parentNode;
                // console.log(row);
                row.parentNode.removeChild(row);
            }

            // 编辑数据函数
            function editRow(button) {
                var row = button.parentNode.parentNode;
                // console.log(row);

                // 获取单元数据
                var name = row.cells[0];
                var phone = row.cells[1];

                // 通过弹窗获取输入数据
                var inputName = prompt("请输入主人的名字喵~ ");
                var inputPhone = prompt("请输入主人的电话喵~ ");

                // 修改数据为输入内容文本
                name.innerHTML = inputName;
                phone.innerHTML = inputPhone;
            }
    </script>
</body>

</html>